<!-- 用例定时任务 -->
<template>
  <div style="height: 100%">
    <div style="height: 90%">
      <el-tabs v-model="form.name" type="card" @tab-click="handleClick">
        <el-button
          v-if="taskListsv.length > 0"
          type="primary"
          size="mini"
          plain
          @click="addTask = true"
          >创建任务</el-button
        >
        <el-tab-pane
          :key="item.name"
          v-for="(item, index) in projectList"
          :label="item.project_name"
          :name="item.project_name"
        >
          <el-table :data="taskList" style="width: 100%">
            <el-table-column label="任务名称" width="180" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.task_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="任务开始-结束" width="300" align="center">
              <template slot-scope="scope">
                <span
                  >{{ scope.row.start_time }} - {{ scope.row.end_time }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="执行频率" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.data_format == 'minutes'"
                  >{{ scope.row.number }} 分钟</span
                >
                <span v-else-if="scope.row.data_format == 'hours'"
                  >{{ scope.row.number }} 小时</span
                >
                <span v-else="scope.row.data_format == 'days'"
                  >{{ scope.row.number }} 天</span
                >
              </template>
            </el-table-column>
            <el-table-column label="任务状态" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.task_status == 0"
                  type="primary"
                  plain
                  disabled
                  >新任务</el-button
                >
                <el-button
                  v-else-if="scope.row.task_status == 1"
                  type="info"
                  plain
                  disabled
                  >执行中...</el-button
                >
                <el-button
                  v-else-if="scope.row.task_status == 2"
                  type="warning"
                  plain
                  disabled
                  >已暂停</el-button
                >
                <el-button
                  v-else-if="scope.row.task_status == 3"
                  type="success"
                  plain
                  disabled
                  >执行完成</el-button
                >
                <el-button
                  v-else="scope.row.task_status == 4"
                  type="danger"
                  plain
                  disabled
                  >执行失败</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="服务版本信息" align="center">
              <el-button type="text">详细信息</el-button>
            </el-table-column>
            <el-table-column label="任务操作" align="center">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="执行"
                  placement="top-start"
                >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="operationJob(scope.row.id)"
                    circle
                    >执行</el-button
                  >
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="启动"
                  placement="top-start"
                >
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-video-play"
                    @click="startjob(scope.row.id)"
                    circle
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="暂停"
                  placement="top-start"
                >
                  <el-button
                    type="warning"
                    size="mini"
                    icon="el-icon-video-pause"
                    @click="pause(scope.row.id)"
                    circle
                  >
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="恢复"
                  placement="top-start"
                >
                  <el-button
                    type="success"
                    size="mini"
                    icon="el-icon-refresh-right"
                    @click="resume(scope.row.id)"
                    circle
                  ></el-button>
                </el-tooltip>
                <el-button
                  type="danger"
                  size="mini"
                  slot="reference"
                  icon="el-icon-delete"
                  @click="deleteTask(scope.row.id)"
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="创建任务" :visible.sync="addTask" width="500px">
      <el-form :model="form">
        <el-form-item label="任务名称:" :label-width="formLabelWidth">
          <el-input v-model="form.taskName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="服务/版本:" :label-width="formLabelWidth">
          <el-cascader
            v-model="form.taskSV"
            placeholder="可以搜索"
            :options="taskListsv"
            :props="{
              value: 'id',
              label: 'name',
              children: 'version',
              multiple: true,
            }"
            filterable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="执行周期:" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.startendTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="执行频率:" :label-width="formLabelWidth">
          <el-select
            v-model="form.number"
            placeholder="请选择"
            style="width: 90px"
          >
            <el-option v-for="ss in 60" :key="ss" :label="ss" :value="ss">
            </el-option>
          </el-select>
          <el-select
            v-model="form.data_format"
            placeholder="请选择"
            style="width: 90px"
          >
            <el-option
              v-for="item in optionss"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明:" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="form.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTask = false">取 消</el-button>
        <el-button type="primary" @click="addTask1()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      optionss: [
        {
          value: "minutes",
          label: "分钟",
        },
        {
          value: "hours",
          label: "小时",
        },
        {
          value: "days",
          label: "天",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      startTime: "",
      addTask: false,
      projectList: [],
      taskList: [],
      form: {
        taskName: "",
        taskSV: [],
        name: "",
        number: "",
        data_format: "",
        startendTime: "",
        remark: "",
      },
      formLabelWidth: "80px",
      taskListsv: [],
    };
  },

  // 方法集合
  methods: {
    // 执行任务
    operationJob(id) {
      this.$axios.get("/operationJob/", { params: { id: id } }).then((res) => {
        if (res.status === 200) {
          this.$message("任务开始执行。。。");
          this.routparam(res.data);
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    // 删除任务
    deleteTask(id) {
      this.$axios.get("/deleteTask/", { params: { id: id } }).then((res) => {
        if (res.status === 200) {
          this.$message(res.data.msg);
          this.selectTask();
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    // 页面数据传递
    routparam(caseresp) {
      this.$router.push({
        name: "caseReport",
        params: { caseresp: caseresp },
      });
    },
    // 启动任务
    startjob(id) {
      this.$axios.get("/startjob/", { params: { id: id } }).then((res) => {
        if (res.data.code === 1) {
          this.$message("任务开始执行。。。");
          this.selectTask();
        } else {
          this.$message(res.data.msg);
        }
      });
    },

    // 暂停任务
    pause(id) {
      this.$axios.get("/pause/", { params: { id: id } }).then((res) => {
        if (res.data.code === 1) {
          this.$message("任务已暂停");
          this.selectTask();
        } else {
          this.$message(res.data.msg);
        }
      });
    },

    // 恢复任务
    resume(id) {
      this.$axios.get("/resume/", { params: { id: id } }).then((res) => {
        if (res.data.code === 1) {
          this.$message("任务已恢复");
          this.selectTask();
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    // 删除任务
    deletejob(id) {
      this.$axios.get("/deletejob/", { params: { id: id } }).then((res) => {
        if (res.data.code === 1) {
          this.$message("任务已删除。。。");
          this.selectTask();
        } else {
          this.$message(res.data.msg);
        }
      });
    },

    selectProject() {
      this.$axios.get("/selectProject/").then((res) => {
        if (res.status === 200) {
          this.projectList = res.data;
        }
      });
    },

    selectTask() {
      this.$axios
        .get("/selectTask/", { params: { name: this.form.name } })
        .then((res) => {
          if (res.status === 200) {
            this.taskList = res.data;
          }
        });
    },
    handleClick(tab, event) {
      this.taskList = [];
      this.$axios
        .get("/selectTask/", { params: { name: this.form.name } })
        .then((res) => {
          this.taskList = res.data;
          this.selectSV();
        });
    },
    selectSV() {
      this.$axios
        .get("/selectsv/", { params: { name: this.form.name } })
        .then((res) => {
          this.taskListsv = res.data;
        });
    },
    addTask1() {
      this.$axios
        .post("/addTask/", {
          project_name: this.form.name,
          task_name: this.form.taskName,
          data_format: this.form.data_format,
          number: this.form.number,
          service_version: this.form.taskSV,
          start_end: this.form.startendTime,
          remark: this.form.remark,
        })
        .then((res) => {
          if (res.data.success === "true") {
            this.addTask = false;
            this.selectTask();
          } else {
            alert(res.data.massage);
          }
        });
    },
  },

  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.selectProject();
  },
};
</script>
<style >
</style>
